import React, { useEffect, useState } from 'react'
import { Table, Space, Input } from 'antd';
import { Modal, Button } from 'antd';
import { list, listadd, listexit, listdel, listsearch } from '../../api'

export default function List(props) {
  const [list2, setList] = useState([])
  useEffect(() => {
    drugList()
  }, [])
  const drugList = async () => {
    let res = await list()
    if (res.data.code === 200) {
      setList([...res.data.data])
    } else {
      props.history.push('/login')
    }
  }

  const drugdel = async (id) => {
    await listdel({ id })
    drugList()
  }

  const { Search } = Input;
  const onSearch = async (value) => {
    let res = await listsearch({ value })
    setList([...res.data.data])
  }

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render: id => <a>{id}</a>,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '操作',
      key: 'action',
      render: (record) => (
        <Space size="middle">
          <a onClick={() => { drugdel(record.id) }}>删除</a>
          <a onClick={() => { drugset(record) }}>编辑</a>
        </Space>
      ),
    },
  ];


  const [isModalVisible, setIsModalVisible] = useState(false);
  const [show, setshow] = useState(false)
  const [title1, settitle1] = useState([])
  const [time1, settime1] = useState([])
  const [type1, setreading1] = useState([])
  const [id1, setid1] = useState([])

  const title = (e) => {
    settitle1(e.target.value)
  }

  const time = (e) => {
    settime1(e.target.value)
  }
  const type = (e) => {
    setreading1(e.target.value)
  }






  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = async () => {
    if (show === true) {
      await listexit({ id: id1, title: title1, time: time1, type: type1, })
      drugList()
    } else if (show === false) {
      await listadd({ title: title1, time: time1, type: type1, })
      drugList()
    }
    clear()
  };

  const handleCancel = () => {
    clear()
    setIsModalVisible(false);
  };


  const drugset = (record) => {
    setIsModalVisible(true)
    setshow(true)
    settitle1(record.title)
    settime1(record.time)
    setreading1(record.type)
    setid1(record.id)
  }

  const clear = () => {
    setIsModalVisible(false)
    settitle1('')
    setreading1('')
    settime1('')
    setid1(0)
  }

  const [page, setPage] = useState({
    total_count: 0, // 总页数
    page_no: 1, // 当前页码
    page_size: 7 // 每页数据条数
  });

  return (
    <div className='wrapper'>
      <div className="add">
        <Button type="primary" onClick={showModal}>
          新建
                </Button>
        <Modal title="请输入" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <p>标题:<input type="text" value={title1} onChange={(e) => { title(e) }} /></p>
          <p>时间:<input type="text" value={time1} onChange={(e) => { time(e) }} /></p>
          <p>类型:<input type="text" value={type1} onChange={(e) => { type(e) }} /></p>
        </Modal>
      </div>
      <Search placeholder="请输入药名" onSearch={onSearch} style={{ width: 200 }} />
      <Table columns={columns}
       dataSource={list2}
       pagination={{ // 具体配置可看antd官网文档Pagination的API部分
        // position: ['bottomRight'],
        // size: 'small',
        // showQuickJumper: true,
        // defaultCurrent: 1,
        // total: page.total_count,
        pageSize: page.page_size,
        // current: page.page_no,
        // showSizeChanger: true,
        // showTotal: total => `共${total}条`,
        // onChange: (pageNo, pageSize) => drugList(pageNo, pageSize)
    }}
        />
    </div>
  )
}
